<template>
  <div class="SEditor">
    <div class="SEditor_title">
      <el-input type="textarea" :rows="1" placeholder="请输入标题" v-model="topicData.title"></el-input>
    </div>
    <!--<textarea class="my_editor" id="Editor"></textarea>-->
    <quill-editor ref="mwQuillEditor" class="put-textarea" :autosize="{ minRows: 6, maxRows: 6}"
                  v-model="topicData.content" :options="editorOption">
    </quill-editor>
    <div style="margin-top: 20px">
      <el-button :loading="loading" type="success" @click="handelEditorContent">发布</el-button>
    </div>
    <el-upload
            v-show="false"
            action=""
            :auto-upload="false"
            :on-change="uploadFile"
            >
      <button ref="uploadImg">点击上传</button>
    </el-upload>
  </div>
</template>

<script>
  import { createTopic, updateFileByTopic, uploadFile, getFilePath } from '@/api/topic'
  export default {
    data() {
      return {
        imgList: [],
        loading: false,
        editortext: null,
        topicData: {
          title: null,
          content: null,
          type: null
        },
        editorOption: {
          modules: {
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                ['blockquote', 'code-block'], // 引用  代码块
                [{ header: 1 }, { header: 2 }], // 1、2 级标题
                [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                [{ indent: '-1' }, { indent: '+1' }], // 缩进
                [{ direction: 'rtl' }], // 文本方向
                [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
                [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
                [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                // [{ font: ['songti'] }], // 字体种类
                [{ align: [] }], // 对齐方式
                ['clean'], // 清除文本格式
                ['image'] // 链接、图片、视频
              ],
              handlers: {
                image: this.handleImgUpload
              }
            }
          },
          placeholder: '请输入文章内容'
        }
      }
    },
    mounted() {
      this.tinymce()
    },

    beforeDestroy() {
      // 这个必须要加，不然初始化的时候会有问题
      // this.$tinymce.remove()
    },
    methods: {
      handelEditorContent() {
        if (!this.topicData.title) {
          return this.$message.warning('请输入标题')
        } else if (!this.topicData.content) {
          return this.$message.warning('请输入文章内容')
        }
        this.loading = true
        createTopic(this.topicData).then(response => {
          this.loading = false
          const data = response.data.results
          this.$message.success('发布成功')
          this.$router.go(-1)
        }).catch(err => {
          this.loading = false
        })
      },
      handleImgUpload() {
        this.$refs.uploadImg.click()
      },
      uploadFile(file) {
        const { quill } = this.$refs.mwQuillEditor
        const formData = new FormData()
        formData.append('file', file.raw)
        uploadFile(formData).then(res => {
          const url = `${process.env.BASE_API}${res.data.results}`
          const length = quill.getSelection(true).index
          quill.insertEmbed(length, 'image', url)
          quill.setSelection(length + 1)
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .SEditor {
    .SEditor_title {
      margin-bottom: 20px;
    }

    .el-button {
      background-color: #01540C;
      border: #01540C;
    }
  }
</style>
